<!--<div id="exchangeRecords" style="height: 100%;">-->
<!--</div>-->
<!--<script>-->
<!--    layui.use(['layer', 'form', 'table', 'admin', 'upload', 'tree', 'laytpl', 'laydate'], function () {-->
<!--        var $ = layui.jquery;-->
<!--        $('#exchangeRecords').load('components/purchase/returnRecord/returnGoodsRecords.html');-->
<!--    })-->
<!--</script>-->
<style>
    .layui-form-label {
        width: 90px;
    }

    .layui-input-block {
        margin-left: 120px;
    }

    #erpPurchaseRequisitions-view .layui-disabled {
        color: #393d49 !important;
        background-color: #fff;
    }

    .billAta {
        cursor: default;
        margin-bottom: 10px;

    }

    .billAtaContent {
        display: flex;
        flex-wrap: wrap;
    }

    .billAtabox {
        background-color: #D8D8D8;
        height: 70px;
        min-width: 180px;
        max-width: calc(100% / 6);
        /*width: 200px;*/
        margin-top: 10px;
        margin-right: 10px;
        padding: 10px;
        flex: 1;
        /*margin-bottom: 10px;*/
    }

    .billAtabox .title {
        color: rgb(153, 153, 153);
        padding-bottom: 10px;
        font-size: 12px;
    }

    .billAtabox .content {
        font-style: normal;
        font-size: 30px;
        font-weight: 300;
        color: #169f1d;
    }
</style>
<!-- 正文开始 -->
<div class="layui-fluid">

    <div class="layui-card">
        <div class="layui-card-body">
            <div class="billAta">
                <h1>账单统计</h1>
                <div class="billAtaContent">
                    <div class="billAtabox">
                        <div class="title">年度采购金额(元人民币)</div>
                        <div class="content">680000000.00</div>
                    </div>
                    <div class="billAtabox">
                        <div class="title">年度已结算账单金额(元人民币)</div>
                        <div class="content">660000000.00</div>
                    </div>
                    <div class="billAtabox">
                        <div class="title">待结算账单金额(元人民币)</div>
                        <div class="content">680000000.00</div>
                    </div>
                    <div class="billAtabox">
                        <div class="title">上月账单金额(元人民币)</div>
                        <div class="content">680000000.00</div>
                    </div>
                    <div class="billAtabox">
                        <div class="title">本月已签收金额(元人民币)</div>
                        <div class="content">680000000.00</div>
                    </div>
                    <div class="billAtabox">
                        <div class="title">总账单数(条)</div>
                        <div class="content">680000000.00</div>
                    </div>
                </div>
            </div>
            <!-- 头部操作栏 -->
            <div class="layui-form lay-header">
                <div class="toolbar">
                    <div class="layui-form-item lay-query-content">
                        <div class="lay-query-box">
                            <div class="query-lt">
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">结算状态：</label>
                                    <div class="layui-input-inline mr0">
                                        <select name="settleStatus" id="settleStatus"
                                                lay-filter="settleStatus"></select>

                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">开票状态：</label>
                                    <div class="layui-input-inline mr0">
                                        <select name="receiptStatus" id="receiptStatus"
                                                lay-filter="receiptStatus"></select>

                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">账单编号：</label>
                                    <div class="layui-input-inline mr0">
                                        <input name="code" class="layui-input" type="text"
                                               placeholder="输入账单编号"/>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">供应商名称：</label>
                                    <div class="layui-input-inline mr0">
                                        <input name="supplierName" class="layui-input" type="text"
                                               placeholder="输入供应商名称"/>
                                    </div>
                                </div>
                            </div>
                            <div class="query-rt">
                                <div class="layui-inline">
                                    <button class="layui-btn icon-btn color-green" lay-filter="formSubSearch"
                                            lay-submit layui-form-keyDownSearch="true">查询
                                    </button>
                                    <button class="layui-btn icon-btn color-white" lay-filter="resets" lay-submit>重置
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="lay-btn-rows">
                    <div class="lay-btn-box">
                        <div class="lay-btn-lt">
                            <button id="addBill" class="layui-btn icon-btn color-reseda">生成账单</button>
                        </div>
                        <div class="lay-btn-rt">
                        </div>
                    </div>
                </div>
            </div>
            <!-- 表格 -->
            <table class="layui-table" id="billTable"
                   lay-filter="billTable"></table>
        </div>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="billTableBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">详情</a>
    <!--    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">修改</a>-->
    <!--    <a class="layui-btn layui-btn layui-btn-xs" lay-event="confirm">供应商确认</a>-->
    {{# if(d.settleStatusName==='待审核'){ }}
    <a class="layui-btn layui-btn layui-btn-xs" lay-event="audit">审核</a>
    {{# } }}
    {{# if(d.settleStatusName==='待确认'){ }}
    <a class="layui-btn layui-btn layui-btn-xs" lay-event="settle">+结算信息</a>
    <a class="layui-btn layui-btn layui-btn-xs" lay-event="setList">结算记录</a>
    <a class="layui-btn layui-btn layui-btn-xs" lay-event="receipt">+发票</a>
    <a class="layui-btn layui-btn layui-btn-xs" lay-event="recList">发票记录</a>
    {{# } }}

    <a class="layui-btn layui-btn layui-btn-xs" lay-event="supplier">联系供应商</a>
</script>
<!-- 表格操作列 -->
<script type="text/html" id="detailTableBar">
    <a class="layui-btn  layui-btn-xs" lay-event="detail">详情</a>
</script>
<script type="text/html" id="erpInventoryList">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-form toolbar">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <div class="layui-input-inline mr0">
                            <input id="erpInventoryList-code" class="layui-input" type="text"
                                   placeholder="输入物料编号"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline mr0">
                            <input id="erpInventoryList-name" class="layui-input" type="text"
                                   placeholder="输入物料名称"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline mr0">
                            <select id="erpInventoryList-way">
                                <option value="">请选择计价方式</option>
                                <option value="piece">按件</option>
                                <option value="weight">按重量</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline mr0">
                            <input name="productCategoryId" type="hidden" lay-verify="required">
                            <div class="layui-input-inline mr0" id="productCategoryId"></div>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button id="erpInventoryList-btn-search" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索
                        </button>
                        <button id="erpInventoryList-btn-choose" class="layui-btn layui-btn-normal">确认选择</button>
                    </div>
                </div>
            </div>
            <table class="layui-table" id="erpInventoryList-table" lay-filter="erpInventoryList-table"></table>
        </div>
    </div>
</script>
<script type="text/html" id="formContent">
    <form lay-filter="purchaseOrderForm" id="purchaseOrderForm" class="layui-form open-form">
        <div class="open-model" id="purchaseOrderFormContent">
            <div class="open-auto">
                <div class="layui-form-item layui-row">
                    <table class="layui-table" id="nowDataTable"
                           lay-filter="nowDataTable"></table>
                </div>
                <div class="layui-form-item layui-row">
                    <table class="layui-table" id="detailTable"
                           lay-filter="detailTable"></table>
                </div>
            </div>
        </div>
    </form>
</script>
<style>
    #addBillForm .layui-input-block {
        margin-left: 90px;
    }


</style>
<script type="text/html" id="addBillFormContent">
    <form lay-filter="purchaseOrderForm" id="addBillForm" class="layui-form open-form">
        <div class="open-model">
            <div class="open-auto">
                <div class="layui-form-item layui-row">
                    <label class="layui-form-label w-auto">结束时间</label>
                    <div class="layui-input-block">
                        <input name="billEndTime" lay-verify="required" id="addBillEndTime" type="text"
                               class="layui-input"/>
                    </div>
                </div>
                <div class="layui-form-item layui-row">
                    <label class="layui-form-label w-auto">开始时间</label>
                    <div class="layui-input-block">
                        <input name="billStartTime" lay-verify="required" id="addBillStartTime" type="text"
                               class="layui-input"/>
                    </div>
                </div>
                <div class="layui-form-item text-right">
                    <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">关闭</button>
                    <button class="layui-btn" lay-filter="addBillBtn" type="button" lay-submit>提交
                    </button>
                </div>
            </div>
        </div>
    </form>
</script>
<!-- js部分 -->
<script>
    layui.use(['layer', 'form', 'table', 'admin', 'laytpl', 'laydate', 'util', 'formSelects'], async function () {
            var $ = layui.jquery;
            var layer = layui.layer;
            var form = layui.form;
            var table = layui.table;
            var config = layui.config;
            var admin = layui.admin;
            var upload = layui.upload;
            var laytpl = layui.laytpl;
            var laydate = layui.laydate;
            var util = layui.util;
            var formSelects = layui.formSelects;
            await admin.getDictListPro('settleStatus','bill_settle_status', '结算状态')
            await admin.getDictListPro('receiptStatus', 'bill_receipt_status', '开票状态')
            // 渲染表格
            var insTb = table.render({
                elem: '#billTable',
                url: config.base + 'enterprise/purchase/admin/purchaseBill/list',
                // where: {
                //     access_token: config.getToken().access_token
                // },
                page: true,
                data: [{id: 1}],
                cellMinWidth: 100,
                cols: [[
                    // {type: 'numbers'},
                    {field: 'code', align: 'center', title: '账单编码',},
                    {field: 'supplierName', align: 'center', title: '供应商名称'},
                    {field: 'billStartTime', align: 'center', title: '账单开始时间'},
                    {field: 'billEndTime', align: 'center', title: '账单结束时间'},
                    {field: 'signOrderNum', align: 'center', title: '签收单数'},
                    {field: 'billSum', align: 'center', title: '账单总金额'},
                    {field: 'settleStatusName', align: 'center', title: '结算状态'},
                    {field: 'receiptStatusName', align: 'center', title: '发票状态'},
                    {field: 'createTime', align: 'center', title: '生成时间'},
                    {align: 'center', toolbar: '#billTableBar', title: '操作', width: 480}
                ]]
            });

            function initnowDataTable() {
                table.render({
                    elem: '#nowDataTable',
                    // data: [{id: 1}],
                    cellMinWidth: 100,
                    cols: [[
                        // {type: 'numbers'},
                        {field: 'code', align: 'center', title: '账单编码',},
                        {field: 'supplierName', align: 'center', title: '供应商名称'},
                        {field: 'billStartTime', align: 'center', title: '账单开始时间'},
                        {field: 'billEndTime', align: 'center', title: '账单结束时间'},
                        {field: 'signOrderNum', align: 'center', title: '签收单数'},
                        {field: 'billSum', align: 'center', title: '账单总金额'},
                        {field: 'settleStatus', align: 'center', title: '结算状态'},
                        {field: 'receiptStatus', align: 'center', title: '发票状态'},
                        {field: 'createTime', align: 'center', title: '生成时间'},
                        // {align: 'center', toolbar: '#billTableBar', title: '操作', width: 500}
                    ]]
                });
            }

            function initDetailTable() {
                table.render({
                    elem: '#detailTable',
                    // data: [{id: 1}],
                    cellMinWidth: 100,
                    cols: [[
                        {type: 'numbers'},
                        {field: 'signNo', align: 'center', title: '签收记录编号',},
                        {field: 'logisticsNo', align: 'center', title: '所属物流运单单'},
                        {field: 'sn', align: 'center', title: '所属订单'},
                        {field: 'singSkuNum', align: 'center', title: '签收金额'},
                        {field: 'modifierName', align: 'center', title: '签收人'},
                        {field: 'updateTime', align: 'center', title: '签收时间'},
                        // {field: 'tuihuoren', align: 'center', title: '结算状态'},
                        // {field: 'tuihuojine', align: 'center', title: '发票状态'},
                        // {
                        //     align: 'center', toolbar: '#detailTableBar', title: '操作'
                        // }
                    ]]
                });
            }

            $('#addBill').click(() => {
                admin.formOpen({
                    title: '详情',
                    offset: '50px',
                    content: $('#addBillFormContent').html(),
                    success: function () {
                        laydate.render({
                            elem: '#addBillStartTime',
                            format: 'yyyy-MM-dd',
                        });
                        laydate.render({
                            elem: '#addBillEndTime',
                            format: 'yyyy-MM-dd',

                        });
                    }
                })
            })

            function openDetailForm(data) {
                console.log(123)
                admin.open({
                    title: '详情',
                    area: ['90%', '90%'],
                    offset: '50px',
                    content: $('#formContent').html(),
                    success: function () {
                        initnowDataTable()
                        initDetailTable()
                        table.reload('nowDataTable', {data: [data]})
                        table.reload('detailTable', {data: data.signList})
                    }
                })
            }

            // 工具条点击事件
            table.on('tool(billTable)', function (obj) {
                    var data = obj.data;
                    var layEvent = obj.event;
                    if (obj.event === 'del') { //删除
                        doDelete(obj);
                    } else if (layEvent === 'confirm') { // 确认
                    } else if (obj.event === 'audit') { //审核
                        layer.confirm('是否确认审核通过', {
                            offset: '65px',
                            skin: 'layui-layer-admin'
                        }, function () {
                            admin.req('enterprise/purchase/admin/purchaseBill/audit', {id: data.id}, function (res) {
                                if (res.code == 200) {
                                    layer.msg('审核成功')
                                    table.reload('billTable')
                                } else {
                                    layer.msg('审核失败')
                                }
                            }, 'GET')
                        });
                    }
                    if (obj.event === 'finish') { //询价结束
                        finish(data);
                    }
                    if (obj.event === 'generate') { //生成询价单
                        generate(data);
                    } else if (obj.event === 'close') { //关闭
                        doClose(obj);
                    } else if (obj.event === 'detail') { //详情
                        // showViewModel(data);
                        openDetailForm(data)
                        // admin.req('enterprise/purchase/admin/purchaseRequisitionsDetail/list', {
                        //     limit: 9999,
                        //     purchaseRequisitionsId: data.id
                        // }, function (res) {
                        //     if (200 == res.code) {
                        //         let dataVal = {...data}
                        //         dataVal.list = res.data
                        //         openForm('detail', dataVal)
                        //
                        //     }
                        // })

                    } else if (obj.event === 'settle') {
                        admin.formOpen({
                            area: ['90%', '90%'],
                            title: '查看结算信息',
                            offset: '50px',
                            path: 'components/purchase/barterRecord/settleForm.html',
                            success: function () {
                                parentData.data = {...data};
                                parentData.eventName = 'settle';
                            }
                        })
                    } else if (obj.event === 'setList') {
                        console.log('data', data)
                        // admin.req('enterprise/purchase/admin/purchaseBillSettle/pageList',{billId:data.id},(res)=>{
                        admin.formOpen({
                            area: ['90%', '90%'],
                            title: '添加结算信息',
                            offset: '50px',
                            path: 'components/purchase/barterRecord/settleForm.html',
                            success: function () {
                                parentData.data = {...data};
                                parentData.eventName = 'setList';
                            }
                        })
                        // })

                    } else if (obj.event === 'receipt') {
                        admin.formOpen({
                            area: ['90%', '90%'],
                            title: '添加发票信息',
                            offset: '50px',
                            path: 'components/purchase/barterRecord/receiptForm.html',
                            success: function () {
                                parentData.data = {...data};
                                parentData.eventName = 'receipt';
                            }
                        })
                    } else if (obj.event === 'recList') {
                        admin.formOpen({
                            area: ['90%', '90%'],
                            title: '查看发票记录',
                            offset: '50px',
                            path: 'components/purchase/barterRecord/receiptForm.html',
                            success: function () {
                                parentData.data = {...data};
                                parentData.eventName = 'recList';
                            }
                        })
                    } else if (obj.event === 'supplier') {
                        admin.formOpen({
                            area: ['90%', '90%'],
                            title: '查看签收记录',
                            offset: '50px',
                            path: 'components/purchase/barterRecord/supplierInfoForm.html',
                            success: function () {
                                parentData.data = {...data};
                                parentData.eventName = 'supplier';
                            }
                        });
                    }
                }
            );


            // 删除
            var doDelete = function (obj) {
                layer.confirm('确定要删除吗？', {
                    skin: 'layui-layer-admin'
                }, function (i) {
                    layer.close(i);
                    layer.load(2);
                    admin.req('enterprise/purchase/admin/purchaseRequisitions/' + obj.data.id, {}, function (data) {
                        layer.closeAll('loading');
                        if (data.code == 200) {
                            layer.msg(data.msg, {icon: 1, time: 500});
                            obj.del();
                        } else {
                            layer.msg(data.msg, {icon: 2, time: 1000});
                        }
                    }, 'DELETE');
                });
            };

            // 搜索
            form.on('submit(formSubSearch)', function (data) {
                console.log(123)
                table.reload('billTable',{where: data.field, page: {curr: 1}}, 'data');
            });
            // 添加账单
            form.on('submit(addBillBtn)', function (d) {
                admin.req('enterprise/purchase/admin/purchaseBill/add', JSON.stringify(d.field), function (res) {
                    if (res.code == 200) {
                        layer.msg(res.msg, {icon: 1, time: 500});
                        table.reload('billTable')
                        layer.closeAll('page');

                    } else {
                        layer.msg(data.msg, {icon: 2, time: 1000});
                    }
                }, 'POST', false, "application/json");
            });
            // 重置搜索
            form.on('submit(resets)', function (data) {
                insTb.reload({where: admin.resetSearch(data.field), page: {curr: 1}}, 'data');
            });


        }
    )
    ;
</script>